<template>
  <div>
<!--    <div class="table-page-search-wrapper">-->
<!--      <a-form-model :model="queryParam" layout="inline">-->
<!--        <a-row :gutter="48">-->
<!--          <a-col :md="6" :sm="24">-->
<!--            <a-form-model-item label="通讯账号">-->
<!--              <a-select-->
<!--                v-model="queryParam['filter[adviser_kaola_accounts]']"-->
<!--                placeholder="选择通讯账号"-->
<!--              >-->
<!--                <a-select-option v-for="(item,index) in accountOpts" :key="item" :value="item">{{index}}</a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :md="6" :sm="24">-->
<!--            <a-form-model-item label="通话时长">-->
<!--              <a-select v-model="queryParam['filter[nanfang_section]']" placeholder="选择对应的通时区间">-->
<!--                <a-select-option v-for="(item,index) in sectionOpts" :key="index" :value="index">{{item}}</a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :md="6" :sm="24">-->
<!--            <a-form-model-item label="通话时间">-->
<!--              <a-date-picker style="width: 100%" v-model="queryParam['filter[createTime]']" @change="onChange" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :md="6" :sm="24">-->
<!--            <a-button type="primary" @click="$refs.table.refresh(true)" style="margin-right:10px;">查询</a-button>-->
<!--            <a-button type="default" @click="resetSearch">重置</a-button>-->
<!--          </a-col>-->
<!--        </a-row>-->
<!--      </a-form-model>-->
<!--    </div>-->
    <p>搜索结果总通时：<a-tag color="red">{{totalZts/60}}min</a-tag></p>
    <s-table
      bordered
      ref="table"
      :row-key="(record) => record.id"
      :columns="kaolaColumns"
      :data="kaolaData"
    >
      <div
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-input
          v-ant-ref="c => (searchInput = c)"
          :placeholder="`搜索${column.title}`"
          :value="selectedKeys[0]"
          style="width: 188px; margin-bottom: 8px; display: block;"
          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
          重置
        </a-button>
      </div>
      <div
        slot="filterSelect"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-select
          show-search
          style="width: 188px; margin-bottom: 8px; display: block;"
          :placeholder="`选择${column.title}`"
          :value="selectedKeys[0]"
          :filter-option="filterOption"
          @change="(value) => setSelectedKeys(value ? [value] : [])"
          @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
          <a-select-option v-for="(item,index) in accountOpts" :key="item" :value="item">{{index}}</a-select-option>
        </a-select>
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
          重置
        </a-button>
      </div>
      <div
        slot="filterRange"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-range-picker
          style="width: 228px; margin-bottom: 8px; display: block;"
          :value="createValue"
          @change="onChange0"
          @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 110px; margin-right: 8px"
          @click="() => handleRange(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 110px" @click="() => rangeReset(clearFilters)">
          重置
        </a-button>
      </div>
      <template slot="url" slot-scope="text">
        <audio :src="text" controls :style="{ height: '20px', lineHeight: '20px' }">
          您的浏览器不支持 audio 标签
        </audio>
      </template>
      <template slot="sign" slot-scope="text">
        <a-tag v-if="text == 0">正常</a-tag>
        <a-tag color="red" v-else-if="text == 1">异常</a-tag>
        <a-tag color="blue" v-else>优秀</a-tag>
<!--        <div v-if="record.v_id != ''">-->
<!--          <div v-if="record.yc_sign == 1">-->
<!--            <a-rate :value="1" :count="1" :style="{ color: '#f00' }" @change="signVoice(record.id)">-->
<!--              <a-icon slot="character" type="exclamation-circle" />-->
<!--            </a-rate>-->
<!--          </div>-->
<!--          <div v-else>-->
<!--            <a-rate :value="0" :count="1" :style="{ color: '#f00' }" @change="signVoice(record.id)">-->
<!--              <a-icon slot="character" type="exclamation-circle" />-->
<!--            </a-rate>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div v-else>-->
<!--          <a-rate :value="0" :count="1" :style="{ color: '#f00' }" @change="signVoice(record.id)">-->
<!--            <a-icon slot="character" type="exclamation-circle" />-->
<!--          </a-rate>-->
<!--        </div>-->
      </template>
      <template slot="action">
        <a-button type="link" disabled>删除</a-button>
      </template>
    </s-table>
  </div>
</template>

<script>
import { STable } from '@/components'
import { getCallList, getSign, postSign } from '@/api/calls'
import col from '@/columns/calls'
const kaolaColumns = col.kaola

export default {
  components: {
    STable
  },
  name: 'KaoLa',
  data () {
    return {
      kaolaColumns,
      kaolaData: parameters => {
        return getCallList(Object.assign(parameters, this.queryParam)).then(res => {
          this.totalZts = res.result.kaolaSearchZts
          this.accountOpts = res.result.kaola_account
          this.sectionOpts = res.result.kaola_section
          return res.result
        })
      },
      sectionOpts: {},
      accountOpts: {},
      queryParam: {},
      totalZts: 0,
      createValue: []
    }
  },
  created () {
    this.queryParam['filter[type]'] = '1'
  },
  methods: {
    resetSearch () {
      this.queryParam = {}
      this.queryParam['filter[type]'] = '1'
      this.$refs.table.refresh(true)
    },
    onChange (date, dateString) {
      this.queryParam['filter[createTime]'] = dateString
    },
    onChange0 (date, dateString) {
      this.createValue = date
      this.queryParam['filter[begin_created_at]'] = dateString[0]
      this.queryParam['filter[end_created_at]'] = dateString[1]
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
    },
    handleReset (clearFilters, dataIndex) {
      clearFilters()
      delete this.queryParam['filter[' + dataIndex + ']']
    },
    handleSelect (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
    },
    handleRange (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.$refs.table.refresh(true)
    },
    rangeReset (clearFilters) {
      clearFilters()
      this.createValue = []
      delete this.queryParam['filter[begin_created_at]']
      delete this.queryParam['filter[end_created_at]']
      this.$refs.table.refresh(true)
    },
    signVoice (id) {
      const app = this
      getSign(id, '2').then(res => {
        const result = res.result.data
        if (res.status === 0) {
          if (result.yc_sign === 0) {
            app.$confirm({
              title: '是否标记为异常',
              onOk: () => {
                const d = {}
                d['info[yc_sign]'] = 1
                postSign(id, '2', d).then(res => {
                  const data = res
                  if (data.status === 0) {
                    app.$refs.table.refresh(true)
                  }
                })
              }
            })
          } else {
            app.$confirm({
              title: '是否取消异常标记',
              onOk: () => {
                const d = {}
                d['info[yc_sign]'] = 0
                postSign(id, '2', d).then(res => {
                  if (res.status === 0) {
                    app.$refs.table.refresh(true)
                  }
                })
              }
            })
          }
        } else {
          this.$warning({
            title: res.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
